<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#wrap {
				width: 400px;
				height: 400px;
				background: pink;
				position: relative;
				/*
				注意这里，不在 position: absolute定位 的其他定位中使用margin: auto，会自动转换为marign: 0 auto
				如果在 position: absolute定位 中使用margin: auto 则就是上下左右都是自动。
				*/
				margin: auto;
			}

			/* 
			未知高宽的元素水平垂直居中方案
			这种方案就很奇怪			
			
			绝对定位盒子的特性：
			1、高宽由内容撑开
			2、
			水平方向上 left+right+width+padding+margin=包含块padding区域的尺寸。
			垂直方向上 top+bottom+height+padding+margin=包含块padding区域的尺寸。
			上面这两条是计算公式。使用案例为：
			1、如果 left top bottom right 均为0/width = 100px/margin=auto/“包含块padding区域的尺寸”就是wrap的width值，为400px。
			这时候，需要计算的是margin的auto值为 (400px-100px)/2 = 150px。
			2、如果 left top bottom right 均为0/width和height都没有设定/margin=auto/“包含块padding区域的尺寸”就是wrap的width值，为400px。
			这时候，width、height的默认值为auto，实际得到wrap的width和height。
			这时候，margin因为是auto，实际得到0px。			
			 */
			#inner {
				position: absolute;
				left: 50%;
				top: 50%;
				/*这是根据本地坐标系的移动*/
				/*兼容性不好，去 can i use 网站上看*/
				transform: translate(-50%, -50%);
				/*或者用下面这个也行*/
				/* transform: translate3d(-50%, -50%, 0); */
				background: deeppink;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="inner">
				test <br />
				test <br />
				test <br />
				test <br />
				test <br />
			</div>
		</div>
	</body>
</html>
